<template>
    <Dialog :title="title" :show="true" @close="cancel" :width="325" :height="410" :left="uiLeft" :top="uiTop">
        <div class="box">
            <div class="texture-beautify">
                <div class="base-items">
                    <el-checkbox v-model="baseColorFactor.enable" />
                    <span>基础颜色：</span>
                    <div>
                        <el-color-picker v-model="baseColorFactor.value" :disabled="!baseColorFactor.enable" show-alpha
                            class="items-width-small" />
                    </div>
                    <!-- <div>1</div> -->
                </div>
                <div class="base-items">
                    <el-checkbox v-model="emissiveFactor.enable" />
                    <span>自发光颜色：</span>
                    <el-color-picker v-model="emissiveFactor.value" :disabled="!emissiveFactor.enable" show-alpha
                        class="items-width-small" />
                    <!-- <div>1</div> -->
                </div>
                <div class="base-items">
                    <el-checkbox v-model="metallicFactor.enable" />
                    <span>金属度：</span>
                    <el-slider size="small" :max="1" :step="0.001" v-model.lazy="metallicFactor.value"
                        :disabled="!metallicFactor.enable" class="items-width-large" />
                    <!-- <div>1</div> -->
                </div>
                <div class="base-items">
                    <el-checkbox v-model="roughnessFactor.enable" />
                    <span>粗糙度：</span>
                    <el-slider size="small" :max="1" :step="0.001" v-model.lazy="roughnessFactor.value"
                        :disabled="!roughnessFactor.enable" class="items-width-large" />
                    <!-- <div>1</div> -->
                </div>
                <div class="base-items">
                    <el-checkbox v-model="doubleSided.enable" />
                    <span>是否双面：</span>
                    <el-switch v-model="doubleSided.value" :disabled="!doubleSided.enable" />
                </div>
                <div class="base-items">
                    <el-checkbox v-model="ulint.enable" />
                    <span>无光照：</span>
                    <el-switch v-model="ulint.value" :disabled="!ulint.enable" />
                </div>
                <div class="base-items">
                    <el-checkbox v-model="alphaModel.enable" />
                    <span>透明模式：</span>
                    <el-select v-model="alphaModel.value" placeholder="请选择" :disabled="!alphaModel.enable"
                        class="items-width-large">
                        <el-option v-for="(item, index) in selectTransparent" :key="item.value" :label="item.type"
                            :value="item.value" />
                    </el-select>
                </div>

                <!-- 基础纹理 -->
                <div class="base-texture">
                    <el-checkbox v-model="baseColorTexture.enable" />
                    <span>基础纹理：</span>
                    <el-input v-model="baseColorTexture.value" :disabled="!baseColorTexture.enable" />
                    <img v-if="baseColorTexture.enable" src="../../../assets/cimrts/beautifyMaterails/choose.png"
                        @click="currentDialog = 'baseTexture'" alt="" style="cursor: pointer;" />
                    <img v-else src="../../../assets/cimrts/beautifyMaterails/unchoose.png" alt="" />
                    <!-- <div>1</div> -->
                </div>
                <div class="base-list">
                    <p></p>
                    <span>UV偏移：</span>
                    <el-input v-model="baseColorTexture.translate[0]" type="number"
                        :disabled="!baseColorTexture.enable" />
                    <el-input v-model="baseColorTexture.translate[1]" type="number"
                        :disabled="!baseColorTexture.enable" />
                </div>
                <div class="base-list">
                    <p></p>
                    <span>UV缩放：</span>
                    <el-input v-model="baseColorTexture.scale[0]" type="number" :disabled="!baseColorTexture.enable" />
                    <el-input v-model="baseColorTexture.scale[1]" type="number" :disabled="!baseColorTexture.enable" />
                </div>
                <div class="base-uv">
                    <p></p>
                    <span>UV旋转：</span>
                    <el-slider size="small" :max="360" :step="1" v-model="baseColorTexture.rotate"
                        :disabled="!baseColorTexture.enable" />
                </div>


                <!-- 法向纹理 -->
                <div class="base-texture">
                    <el-checkbox v-model="normalTexture.enable" />
                    <span>法向纹理：</span>
                    <el-input v-model="normalTexture.value" :disabled="!normalTexture.enable" />
                    <img v-if="normalTexture.enable" src="../../../assets/cimrts/beautifyMaterails/choose.png"
                        @click="currentDialog = 'normalTexture'" alt="" style="cursor: pointer;" />
                    <img v-else src="../../../assets/cimrts/beautifyMaterails//unchoose.png" alt="" />
                    <!-- <div>1</div> -->
                </div>
                <div class="base-list">
                    <p></p>
                    <span>UV偏移：</span>
                    <el-input v-model="normalTexture.translate[0]" type="number" :disabled="!normalTexture.enable" />
                    <el-input v-model="normalTexture.translate[1]" type="number" :disabled="!normalTexture.enable" />
                </div>
                <div class="base-list">
                    <p></p>
                    <span>UV缩放：</span>
                    <el-input v-model="normalTexture.scale[0]" type="number" :disabled="!normalTexture.enable" />
                    <el-input v-model="normalTexture.scale[1]" type="number" :disabled="!normalTexture.enable" />
                </div>
                <div class="base-uv">
                    <p></p>
                    <span>UV旋转：</span>
                    <el-slider size="small" :max="360" :step="1" v-model="normalTexture.rotate"
                        :disabled="!normalTexture.enable" />
                </div>
                <div class="base-items">
                    <el-checkbox v-model="magfilter.enable" />
                    <span>放大采样：</span>
                    <el-select v-model="magfilter.value" placeholder="请选择" :disabled="!magfilter.enable"
                        class="items-width-large">
                        <el-option v-for="item in selectmagfilter" :key="item.value" :label="item.type"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="base-items">
                    <el-checkbox v-model="minfilter.enable" />
                    <span>放大采样：</span>
                    <el-select v-model="minfilter.value" placeholder="请选择" :disabled="!minfilter.enable"
                        class="items-width-large">
                        <el-option v-for="item in selectminfilter" :key="item.value" :label="item.type"
                            :value="item.value" />
                    </el-select>
                </div>
            </div>
        </div>
    </Dialog>
    <TexturePanel v-if="currentDialog == 'baseTexture'" :title="'选择纹理'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="baseTextureConfirm" :datasetName="datasetName" />
    <TexturePanel v-if="currentDialog == 'normalTexture'" :title="'选择纹理'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="normalTextureConfirm" :datasetName="datasetName" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { cellStyle2, cellStyleSmall } from "@/scripts/tableStyle";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    createVueDisposer,
    toVR
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import TexturePanel from "./TexturePanel.vue";

const props = withDefaults(defineProps<{ title: string, sceneObject: any, createOrEdit: string }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel");
};

const uiLeft = document.body.clientWidth - 10 - 325;
// const uiLeft = 10;

const uiTop = document.body.clientHeight - document.body.clientHeight / 2;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const currentDialog = ref<any>(undefined)

/**
 * 基础纹理选择
 * @param val 
 */
const baseTextureConfirm = (val: any) => {
    currentDialog.value = undefined
    baseColorTexture.value.value = val
}

/**
 * 法向纹理选择
 * @param val 
 */
const normalTextureConfirm = (val: any) => {
    currentDialog.value = undefined
    normalTexture.value.value = val
}

// 基础颜色
const baseColorFactor = ref({
    enable: false,
    value: 'rgba(255,255,255,1)'
})
// 自发光
const emissiveFactor = ref({
    enable: false,
    value: 'rgba(255,255,255,1)'
})
// 金属度
const metallicFactor = ref({
    "enable": false,
    "value": 0
})

// 粗糙度
const roughnessFactor = ref({
    "enable": false,
    "value": 1
})
// 是否双面
const doubleSided = ref({
    "enable": false,
    "value": false
})

// 无光照
const ulint = ref({
    "enable": false,
    "value": false
})
const selectTransparent = ref([
    {
        type: '不透明',
        value: ' '
    },
    {
        type: '混合模式',
        value: 'BLEND'
    },
    {
        type: '遮罩模式',
        value: 'MASK'
    },

])
// 透明模式
const alphaModel = ref({
    "enable": false,
    "value": " "
})
// 基础纹理
const baseColorTexture = ref({
    "enable": false,
    "value": "",
    "translate": [
        0,
        0
    ],
    "scale": [
        1,
        1
    ],
    "rotate": 0
})

// 法向纹理
const normalTexture = ref({
    "enable": false,
    "value": "",
    "translate": [
        0,
        0
    ],
    "scale": [
        1,
        1
    ],
    "rotate": 0
})

// 放大采样
const magfilter = ref({
        "enable":false,
        "value": null
})
const selectmagfilter = ref(
    [
    {
            type: 'NEAREST',
            value: 9728
        },
        {
            type: 'LINEAR',
            value: 9729
        },
       
      
    ]
)
// 缩小采样
const minfilter = ref({
        "enable":false,
        "value": null
})


const selectminfilter = ref(
    [
    {
            type: 'NEAREST',
            value: 9728
        },
        {
            type: 'LINEAR',
            value: 9729
        },
       {
            type: 'NEAREST_MIPMAP_NEAREST',
            value: 9984
        },
        {
            type: 'LINEAR_MIPMAP_NEAREST',
            value: 9985
        },
        {
            type: 'NEAREST_MIPMAP_LINEAR',
            value: 9986
        },
        {
            type: 'LINEAR_MIPMAP_LINEAR',
            value: 9987
       }
      
    ]
)

// match 从字符串中提取所有的数字,返回数组
const convertRGBA = (val: any) => {
    const get = val.match(/\d+(\.\d+)?/g);
    // const get = val.match(/(\d+)/g)
    const a = parseFloat(get[0]) / 255
    const b = parseFloat(get[1]) / 255
    const c = parseFloat(get[2]) / 255
    return [a, b, c, +get[3]]

}

const datasetName = ref("");

const init = () => {
    datasetName.value = props.sceneObject.datasetName;
    watch([magfilter,minfilter,baseColorFactor, emissiveFactor, metallicFactor, roughnessFactor, doubleSided, ulint, alphaModel, baseColorTexture, normalTexture], () => {
        const data: any = {
            baseColorFactor: {
                enable: baseColorFactor.value.enable,
                value: convertRGBA(baseColorFactor.value.value)
            },
            emissiveFactor: {
                enable: emissiveFactor.value.enable,
                value: convertRGBA(emissiveFactor.value.value)
            },
            metallicFactor: { ...metallicFactor.value },
            roughnessFactor: { ...roughnessFactor.value },
            doubleSided: { ...doubleSided.value },
            ulint: { ...ulint.value },
            alphaModel: { ...alphaModel.value },
            baseColorTexture: {
                "enable": baseColorTexture.value.enable,
                "value": baseColorTexture.value.value,
                "translate": [
                    +baseColorTexture.value.translate[0],
                    +baseColorTexture.value.translate[1]
                ],
                "scale": [

                    +baseColorTexture.value.scale[0],
                    +baseColorTexture.value.scale[1]
                ],
                "rotate": baseColorTexture.value.rotate
            },
            normalTexture: {
                "enable": normalTexture.value.enable,
                "value": normalTexture.value.value,
                "translate": [
                    +normalTexture.value.translate[0],
                    +normalTexture.value.translate[1]
                ],
                "scale": [
                    +normalTexture.value.scale[0],
                    +normalTexture.value.scale[1]
                ],
                "rotate": normalTexture.value.rotate
            },
            magfilter: {...magfilter.value},
            minfilter: {...minfilter.value}
        }

        props.sceneObject.beautifyMaterails = { ...data }
    }, { deep: true })
}

watch(() => props.sceneObject, () => {
    init()
}, { immediate: true })

onMounted(() => {
});
onBeforeUnmount(() => {
});
</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.texture-beautify {
    height: 690px;
    /* overflow-y: auto;
    overflow-x: hidden; */
}

.base-uv {
    display: grid;
    grid-template-columns: 15px 90px 150px;
    align-items: center;
    padding-bottom: 10px;

    grid-column-gap: 10px;


}

.base-texture {
    display: grid;
    grid-template-columns: 15px 90px 120px 20px;
    align-items: center;
    padding-bottom: 10px;
    grid-column-gap: 10px;

}

.base-list {
    display: grid;
    grid-template-columns: 15px 90px 70px 70px;
    align-items: center;
    padding-bottom: 10px;
    grid-column-gap: 10px;
}

.base-items {
    display: grid;
    grid-template-columns: 15px 90px 150px;
    align-items: center;
    padding-bottom: 10px;
    grid-column-gap: 10px;

}
</style>
